<script setup>
import { onMounted, reactive, ref } from "vue";
import { useBuildAllList, useMailboxStatus } from "../../../hooks/lq_index";
import editForm from "./editForm.vue";
import TableList from "@/components/TableList/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { delMailboxApi, getMailboxListApi } from "../../../api/mailbox";
//=================
const buildList = useBuildAllList();
const mailboxStatusList = useMailboxStatus();

// 表格区域数组
const columns = [
  {
    label: "ID",
    prop: "id",
  },
  {
    label: "小区名称",
    prop: "community",
    type: "position",
  },
  {
    label: "信件标题",
    prop: "title",
  },
  {
    label: "发件人",
    prop: "member",
    type: "position",
  },
  {
    label: "状态",
    prop: "status",
  },
  {
    label: "创建时间",
    prop: "create_time",
    type: "time",
  },
  {
    label: "操作",
    type: "action",
  },
];

// 列表功能===============
const queryData = reactive({
  current: 1,
  pageSize: 10,
  community_code: "",
  status: null,
  create_time: "",
});
const total = ref(0);
const list = ref([]);
const initData = async () => {
  let { data } = await getMailboxListApi(queryData);
  console.log(data);
  list.value = data.rows;
  total.value = data.count;
};

// 处理时间
const timeArr = ref([]);
watch(timeArr, (val) => {
  console.log(timeArr.value);
  if (timeArr.value) {
    queryData.create_time = val
      .map((item) => {
        item = +new Date(item);
        return item;
      })
      .join(",");
    console.log(queryData.create_time);
  } else {
    queryData.create_time = "";
  }
});

// 显示状态文字
const showStatus = (val) => {
  let res = mailboxStatusList.find((item) => item.value === val * 1);
  return res ? res.label : "未知";
};

// 每页数量切换
const sizeChange = (val) => {
  queryData.current = val;
  initData();
};
// 页码切换
const currentChange = (val) => {
  queryData.pageSize = val;
  initData();
};
// 搜索确定
const onSearch = () => {
  queryData.current = 1;
  initData();
};
// 重置
const onReset = () => {
  Object.assign(queryData, {
    current: 1,
    pageSize: 10,
    community_code: "",
    status: null,
    create_time: "",
  });
  initData();
};

// 回显处理
const editRow = (id) => {
  editRef.value.replyData(id);
};

// 删除事件
const delRow = async (id) => {
  // await ElMessageBox.confirm(
  //   '确定要删除吗',
  //   '提示',
  //   {
  //     confirmButtonText: '确定',
  //     cancelButtonText: '取消',
  //     type: 'warning',
  //   },
  // )
  await delMailboxApi(id);
  ElMessage.success("删除成功");
  if (queryData.current > 1 && list.value.length === 1) queryData.current--;

  initData();
};

// 图片变量
// const imgUrl = import.meta.env.VITE_APP_BASE_IMG

// 查看编辑功能
const editRef = ref();

//============
onMounted(() => {
  initData();
});
</script>
<template>
  <div class="app-container">
    <span style="font-weight: 700">信箱管理</span>
    <span
      >用于管理小区里业主的信箱信息，包括工作建议，意见反馈等（app端来的数据）</span
    >
    <hr />
    <el-card>
      <!-- 搜索区域 -->
      <el-form label-width="80px" label-position="top" :inline="true">
        <el-form-item label="小区名称">
          <el-select
            clearable
            v-model="queryData.community_code"
            placeholder="请输入"
          >
            <el-option
              v-for="item in buildList"
              :key="item.id"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="信件标题">
          <el-input
            v-model="queryData.title"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryData.status">
            <el-option
              v-for="(item, index) in mailboxStatusList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            clearable
            v-model="timeArr"
            type="daterange"
            size="large"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item style="display: flex; align-items: end">
          <div></div>
          <div>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button @click="onReset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
      <hr />
      <!-- 工具区域 -->
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-icon style="margin-left: 20px">
            <RefreshRight />
          </el-icon>
          <el-icon style="margin-left: 20px">
            <Share />
          </el-icon>
          <el-icon style="margin-left: 20px">
            <Setting />
          </el-icon>
        </div>
      </el-row>
      <hr />
      <!-- 表格区域 -->

      <!-- <el-table :data="list" border stripe>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="community" label="小区名称"></el-table-column>
        <el-table-column prop="title" label="信件标题"></el-table-column>
         <el-table-column prop="member.name" label="发件人"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            {{ showStatus(row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间">
          <template #default="{ row }">
            {{ formatDate(row.create_time) || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="editRow(row.id)" size="default">查看并回复</el-button>
            <el-button type="text" @click="delRow(row.id)" size="default">删除</el-button>
          </template>
        </el-table-column>
      </el-table> -->

      <TableList
        :list="list"
        :columns="columns"
        @handleDel="delRow($event)"
        @handleEdit="editRow($event)"
      >
        <template #otherType="{ row, data }">
          <template v-if="data === 'status'">
            {{ showStatus(row[data]) }}
          </template>
        </template>
      </TableList>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="currentChange"
        @current-change="sizeChange"
        v-model:current-page="queryData.current"
        :page-sizes="[10, 20, 30, 40]"
        v-model:page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
      <!-- 新增修改组件 -->
      <editForm ref="editRef" @updateList="initData" />
    </el-card>
  </div>
</template>
<style scoped></style>
